import Css from './css-tp.mjs'

const keys = Object.keys(Css.numVal).join('|')
const rex = new RegExp(`(${keys})(\\d+|a)([p%])?`,'g')

const mapUnit = (key,val,unit) => {
    if(val === 'a') return 'auto'
    if(/(TW|VA(?!v))/.test(key)) return val
    if(unit==='p' || unit==='%') return `${val}%`
    return `${val}px`
}

let str = 'W50 H30 TS30  VAv50 Wa TW700 TS50 W50% H30% M100p'

let arr = str.match(rex)
let css = arr.join('\n').replace(rex, (name, key, val, unit) => {
    name = /(%)/.test(name) ? name.replace('%','\\%') : name
    val = mapUnit(key, val, unit)
    key = Css.numVal[key]
    return `.${name}{${key}:${val};}`
})


console.log(css);
